<template>
  <div class="common-layout">
    <el-card class="box-card operate-container" shadow="always">
      <el-row>
        <el-col :span="12" style="text-align: left">
          <el-link :underline="false" icon="Search">筛选搜索</el-link>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button class="button" type="primary" @click="queryPage">搜索</el-button>
          <el-button class="button">重置</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form :model="queryForm" :inline="true">
            <el-form-item label="账号/姓名:">
              <el-input v-model="queryForm.name"/>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card operate-container" shadow="always">
      <el-row>
        <el-col :span="12" style="text-align: left">
          <el-link :underline="false" icon="Document">数据列表</el-link>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" icon="Plus" @click="addRole">新 增</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="table-container">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-card class="box-card" shadow="always" v-loading="loading">
            <el-main>
              <MenuTree ref="myMenuTree" :menuTreeData="menuTreeData" :roleMenus="roleMenus"/>
            </el-main>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" shadow="always">
            <el-main>
              <el-table :data="tableData" border style="width: 100%" @row-click="getRoleMenus">
                <el-table-column prop="name" label="名称" align="center"/>
                <el-table-column prop="adminCount" label="后台用户数量" align="center"/>
                <el-table-column prop="description" label="描述" align="center"/>
                <el-table-column prop="createTime" label="创建时间" align="center"/>
                <el-table-column prop="status" label="启用状态" align="center">
                  <template #default="scope">
                    <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"/>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="220" align="center">
                  <template #default="scope">
                    <el-button :text="true" size="small" type="primary" @click="editRole(scope.row)">编辑</el-button>
                    <el-button :text="true" size="small" type="warning" @click="deleteRole(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
            <div class="pagination-container">
              <el-pagination
                  background
                  v-model:currentPage="queryPageReq.pageNum"
                  v-model:page-size="queryPageReq.pageSize"
                  :page-sizes="pageSizes"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, toRefs, ref} from 'vue'
import MenuTree from '../menu/component/MenuTree.vue'
import {getRolesQueryPageApi, getRoleMenusByRoleIdApi} from '../../../request/api/role'
import {getMenuTreeApi} from '../../../request/api/menu'

const state = reactive<{
  tableData: RoleInfoObjItf[],
  queryPageReq: RoleQueryPageParams
  pageSizes: number[],
  totalCount: number,
  queryForm: {
    name?: string
  },
  menuTreeData: MenuListItf[],
  roleMenus: RoleMenusItf
  loading: boolean
}>({
  tableData: [],
  queryPageReq: {
    pageNum: 1,
    pageSize: 5
  },
  pageSizes: [5, 10, 15, 20],
  totalCount: 0,
  queryForm: {},
  menuTreeData: [],
  roleMenus: {
    menuIds: []
  },
  loading: false
})

const {tableData, queryPageReq, pageSizes, totalCount, queryForm, menuTreeData, roleMenus, loading} = toRefs(state)
// 分页查询
const queryPage = () => {
  // 清空菜单树组件里的数据
  roleMenus.value = {
    menuIds: []
  }
  queryPageReq.value.keyword = queryForm.value.name
  getRolesQueryPageApi(queryPageReq.value).then(res => {
    if (res.code === 200) {
      tableData.value = res.data.list
      totalCount.value = res.data.total
    }
  })
}
// 获取树形菜单结构
const menuTree = () => {
  getMenuTreeApi().then(res => {
    if (res.code === 200) {
      menuTreeData.value = res.data
    }
  })
}
queryPage()
menuTree()

// 修改每页条数
const handleSizeChange = (data: number) => {
  queryPageReq.value.pageSize = data
  queryPage()
}

// 修改当前页
const handleCurrentChange = (data: number) => {
  queryPageReq.value.pageNum = data
  queryPage()
}

// 获取角色的菜单信息
const getRoleMenus = (row: RoleObjItf) => {
  loading.value = true
  getRoleMenusByRoleIdApi(row.id).then(res => {
    if (res.code === 200) {
      roleMenus.value = {
        roleId: row.id,
        menuIds: res.data.map(item => item.id as number)
      }
    }
  }).finally(() => {
    loading.value = false
  })
}

// 点击新增角色按钮
const addRole = () => {

}

// 点击编辑角色按钮
const editRole = (rowData: RoleInfoObjItf) => {

}

// 点击删除角色按钮
const deleteRole = (rowData: RoleInfoObjItf) => {

}


</script>

<style lang="less" scoped>

</style>
